在 src/component/Notes 的 link path 有誤，下面已更改，各位抱歉QQ。

大家好我是 Chris 今天又再挑戰極限了，如果來不及完成全部那就分到明天在用完吧 : P

今天的 css

我們剩下最後一個頁面，就可以把所有的 ui 介面完成，那就馬上開始吧。

首先新增一個 NotesDetail.js 並把它放進 src/pages 然後簡單的稱版一下：

    <FeaturedBoard title="Note Title" className="title">
      <Banner article={article} />
    </FeaturedBoard>

構想是這樣的，藉由點擊在 notes.js 裡的其中一篇文章概述的 button， 就會透過 Link 這個套件傳遞該文章的title 或是 id 這種具有獨特性的識別 data 到 path 中成為 param，大概會像這樣：

localhost:3000/Notes/ title

然後 NotesDetail.js 就可以藉由接收這個 param 在 data 中讀取屬於他那篇的文章，並顯示出來。

為了達到這樣的效果，我們需要在 app.js 新增一個可以傳遞 param 的 Router，會像這樣：

  // app.js
  return (
    <div>
      <Navbar />
      <Switch>
        <Route path="/Notes/:param" component={NotesDetail}/>
        <Route path="/About" component={About} />
        <Route exact path="/Notes" component={Notes} />
        <Route exact path="/" component={Home} />
      </Switch>
      <Footer />
    </div>
  );
}

註：可以在 "：" 之後放置 param，讓 NotesDetail 可以找到指定的內容，當然你想怎麼設定 param 的名稱都可以。

接下來打開 Note.js ，設置 Link 讓我們可以傳送 param 和移動到該文章：

import React from "react";
import Title from "./Title";
import { Link } from "react-router-dom";
export default function Note({ note, title, className }) {
  return (
    <div className="note-container">
      <Title title={title} className={className} />
      {note.map((item, index) => {
        return (
          <div key={index} className="note-overview">
            <h1>title:{item.title}</h1>
            <section>{item.overview}</section>
            <p>{item.date}</p>
            <Link className="btn-primary" to={`/Notes/${item.title}`}>
              看更多
            </Link>
          </div>
        );
      })}
    </div>
  );
}

這樣就設定完成了，接著我們回到 NotesDetail 接收 param 吧。

我們將使用 react-router ( react-router-dom 的核心文件 )的 useParams 抓取參數 (param) ，會像這樣：

註: import { useParams } from "react-router";

let {title} = useParams();

我們使用 console 測試一次吧：

註：會出現兩次是因為包住 index 的 React.StrictMode 不想要的話把它刪掉就好。

那既然我們可以接到參數了，就開始用 param 找到我們的資料吧

首先，使用 useState 創建 state，再把那一大筆 notes 資料貼到 NotesDetail

我們將使用 fillte() 找到我們要的資料，並用 useState存起來，大概像這樣：

// 接收 param
  let { param } = useParams({});
// 設定 state
  const [note, setNote] = useState([]);
//使用 filter 找到要的內容然後存起來
  useEffect(() => {
    setNote(...Notes.filter((item) => item.title === { param }.param));
  }, []);

註： … 就是展開運算子（spread operator），可以把陣列拆分，這樣存進去比較好取值。

這時我們想要的文章就用 note 存起來了，用上去試試看吧：

  // NotesDetail
    <div>
      <FeaturedBoard title="Note Title" className="title">
        <Banner article={article} />
      </FeaturedBoard>
      <InfoBoard pic={null}>
        <section className="note">
          <h1>{note.title}</h1>
          <h2>{note.subtitle}</h2>
          <p>{note.date}</p>
          <article>{note.article}</article>
        </section>
      </InfoBoard>
    </div>

可以看到內容很成功的上去了，礙於時間關係今天就先做到這裡，明天再把畫面補好QQ。